<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3">
        </div>
    </div>
    <script>
        /* load方法区别于get和post,get和post方法主要用来发请求提交参数给服务器，load方法用于加载资源(模板) */
        /* 当页面加载完毕后，发请求获取footer文件的内容设置为box3的内容 */
        $(() => {
            // $.ajax({
            //     type: "get",
            //     url: "./tmp/footer.html",
            //     success: function(response) {
            //         // console.log(response);
            //         $(".box3").html(response);
            //     }
            // });

            /* 加载指定路径对应的内容，设置为选中标签的内容 */
            /* 001-基本使用 */
            // $(".box3").load("./tmp/footer.html");

            /* 002-高级用法 */
            $(".box3").load("./tmp/footer.html p");
        })
    </script>
</body>

</html>